<template>
  <div v-if="is_itemPop" @click="itemPopClick($event)" class="itemPop">
    <div class="itemPopMain">

      <!--标题区域-->
      <div class="tit">
        <strong>
          {{is_zj_pwd?"交易密码验证":i_p_title}}
        </strong>
        <img @click="op_itemPop(false)" src="@/assets/img/pop/closeBtn.png" alt="">
      </div>

      <!--弹窗内容区域-->
      <div class="itemPopMainCon">

        <ul v-if="i_p_title=='修改密码'" class="i_t_m_c_00">
          <li>
            <div class="i_t_m_c_top">
              <i>*</i>
              <span>原始密码</span>
            </div>
            <input v-model="old_u_pwd" type="text">
          </li>
          <li>
            <div class="i_t_m_c_top">
              <i>*</i>
              <span>新密码</span>
            </div>
            <input v-model="new_u_pwd" type="text">
          </li>
        </ul>

        <div v-if="i_p_title=='充值确认'||i_p_title=='充值'" class="chargeBox">
          <div v-show="itemPop_step==0">
            <div class="inpLi">
              <i>*</i>
              <span class="mr_00">充值数量(USDT):</span>
              <input v-model="chargeNum" type="number">
            </div>
          </div>
          <div v-show="itemPop_step==1" class="chargeBoxMain">
            <dl>
              <dt>
                <span>温馨提示</span>
              </dt>
              <dd>
                <div class="txt">
                  <span>
                    为保证系统尽快确认到账请确认转出后点击已充值
                  </span>
                  <span>
                    充值地址请以当前地址为准，如转错地址导致货币丢失，责任自负
                  </span>
                </div>
              </dd>
            </dl>

            <dl>
              <dt>
                <i>*</i><span>钱包二维码</span>
              </dt>
              <dd>
                <div class="wxCode" ref="qrCodeDiv">

                </div>
              </dd>
            </dl>

            <dl>
              <dt>
                <i>*</i><span>钱包地址</span>
              </dt>
              <dd>
                <input class="ddInp_00" type="text" v-model="w_addr">
              </dd>
            </dl>

            <dl>
              <dt>
                <i>*</i><span>充值数量(USDT)</span>
              </dt>
              <dd>
                <input class="ddInp_01" type="text" v-model="chargeNum">
              </dd>
            </dl>

            <dl>
              <dt>
                <span>充值金额提示</span>
              </dt>
              <dd>
                <div class="txt">
                  <span>
                    请按照实际到账金额(扣除手续费之后的到账):11.838进行充值,错误到账金额不予到账！
                  </span>
                </div>
              </dd>
            </dl>

          </div>
        </div>

        <div v-if="i_p_title=='提现'" class="withdrawalBox">
            <div v-if="itemPop_step==1" class="withdrawalBoxMain">

              <dl>
                <dt>
                  <span>当前汇率</span>
                </dt>
                <dd>
                  <div class="y_txt">
                    <span>
                      {{u_rate}}
                    </span>
                  </div>
                </dd>
              </dl>

              <dl>
                <dt>
                  <i>*</i>
                  <span>提现数量(积分)</span>
                </dt>
                <dd>
                  <input v-model="withdrawAmount" class="ddInp_01" type="number">
                </dd>
              </dl>

              <dl>
                <dt>
                  <span>实际到账(USDT)</span>
                </dt>
                <dd>
                  <div class="y_txt">
                    <span>
                      {{getRates(withdrawAmount/u_rate)}}
                    </span>
                  </div>
                </dd>
              </dl>

            </div>
        </div>

        <div v-if="i_p_title=='代币转让'" class="coinTransBox">
            <div v-if="itemPop_step==1" class="coinTransBoxMain">
                <dl>
                  <dt>
                    <i>*</i>
                    <span>转让数量(代币)</span>
                  </dt>
                  <dd>
                    <input v-model="coin_trans_amount" class="ddInp_01" type="number">
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <i>*</i>
                    <span>转给</span>
                  </dt>
                  <dd>
                    <input v-model="coin_trans_u_name" class="ddInp_02" type="text">
                  </dd>
                </dl>
            </div>
        </div>

        <div v-if="i_p_title=='设置钱包地址'" class="setWalletAddrBox">
          <div v-if="itemPop_step==1" class="setWalletAddrBoxMain">
            <dl>
              <dt>
                <i>*</i>
                <span>钱包地址</span>
              </dt>
              <dd>
                <input class="ddInp_02" v-model="w_addr" type="text">
              </dd>
            </dl>
            <dl>
              <dd>
                <div class="y_txt">
                  <span>
                    请填写TRC20地址,因地址问题币没到账后果自负
                  </span>
                </div>
              </dd>
            </dl>
          </div>
        </div>

        <div v-if="i_p_title=='设置交易密码'" class="setTransPwdBox">
          <div v-if="itemPop_step==1" class="setTransPwdBoxMain">
            <dl>
              <dt>
                <i>*</i>
                <span>交易密码</span>
              </dt>
              <dd>
                <input v-if="!is_new_u_pwd_see" type="password" v-model="set_new_u_pwd">
                <input v-else type="text" v-model="set_new_u_pwd">
                <div @click="setVal('is_new_u_pwd_see')" class="seeBox">
                  <img v-show="!is_new_u_pwd_see" src="@/assets/img/login/see.png" alt="">
                  <img v-show="is_new_u_pwd_see" src="@/assets/img/login/no_see.png" alt="">
                </div>
              </dd>
            </dl>
            <dl>
              <dt>
                <i>*</i>
                <span>确认交易密码</span>
              </dt>
              <dd>
                <input v-if="!is_ver_new_u_pwd_see" type="password" v-model="ver_new_u_pwd">
                <input v-else type="text" v-model="ver_new_u_pwd">
                <div @click="setVal('is_ver_new_u_pwd_see')" class="seeBox">
                  <img v-show="!is_ver_new_u_pwd_see" src="@/assets/img/login/see.png" alt="">
                  <img v-show="is_ver_new_u_pwd_see" src="@/assets/img/login/no_see.png" alt="">
                </div>
              </dd>
            </dl>
          </div>
        </div>


        <div v-if="is_zj_pwd">
          <div class="i_t_m_c_top">
            <i>*</i>
            <span>交易密码</span>
          </div>
           <div class="pwdInp">
             <input v-if="!u_pwd_see" type="password" v-model="u_pwd">
             <input v-else type="text" v-model="u_pwd">
             <div @click="setVal('u_pwd_see')" class="seeBox">
               <img v-show="!u_pwd_see" src="@/assets/img/login/see.png" alt="">
               <img v-show="u_pwd_see" src="@/assets/img/login/no_see.png" alt="">
             </div>
           </div>
        </div>
      </div>


      <!--下方按钮区-->
      <div class="itemPop_bot">
        <dl v-if="i_p_title=='修改密码'">
          <dt @click="submitFn()">
            设置
          </dt>
          <dd @click="op_itemPop(false)">
            取消
          </dd>
        </dl>
        <div v-if="i_p_title=='充值确认'||i_p_title=='充值'">

          <dl v-if="itemPop_step==0">
            <dt @click="submitFn()">
              OK
            </dt>
            <dd @click="op_itemPop(false)">
              Cancel
            </dd>
          </dl>
          <dl v-if="itemPop_step==1">
            <dt @click="submitFn()">
              充值
            </dt>
            <dd @click="op_itemPop(false)">
              取消
            </dd>
          </dl>

        </div>

        <div v-if="i_p_title=='提现'">
          <dl v-if="itemPop_step==1">
            <dt @click="submitFn()">
              提现
            </dt>
            <dd @click="op_itemPop(false)">
              取消
            </dd>
          </dl>
        </div>

        <div v-if="i_p_title=='代币转让'">
          <dl v-if="itemPop_step==1">
            <dt @click="submitFn()">
              转让
            </dt>
            <dd @click="op_itemPop(false)">
              取消
            </dd>
          </dl>
        </div>

        <div v-if="i_p_title=='设置钱包地址'">
          <dl v-if="itemPop_step==1">
            <dt @click="submitFn()">
              设置
            </dt>
            <dd @click="op_itemPop(false)">
              取消
            </dd>
          </dl>
        </div>
        <div v-if="i_p_title=='设置交易密码'">
          <dl v-if="itemPop_step==1">
            <dt @click="submitFn()">
              设置
            </dt>
            <dd @click="op_itemPop(false)">
              取消
            </dd>
          </dl>
        </div>
        <!--交易密码验证-->
        <dl v-if="is_zj_pwd">
          <dt @click="yz_qrBtn">
            验证
          </dt>
          <dd @click="op_itemPop(false)">
            取消
          </dd>
        </dl>

      </div>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2';
  export default{
    data(){
      return{
        i_p_title:"",
        is_itemPop:false,
        itemPop_step:null,
        is_zj_pwd:false,
        w_addr:"TChJH7Shxwup3rr8mCZGMT1CgSfT2kaLHj",
        chargeNum:11.838,
        u_pwd_see:false,
        u_pwd:"",
        is_new_u_pwd_see:false,
        new_u_pwd:"",
        is_ver_new_u_pwd_see:false,
        ver_new_u_pwd:"",
        //修改密码
        old_u_pwd:"",
        new_u_pwd:"",
        //代币转让
        coin_trans_u_name:"",
        coin_trans_amount:"",
        //充值确认
        chargeNum:"",
        //提现
        withdrawAmount:"",
        u_rate:""
      }
    },
    created() {
      let that=this;
      this.$bus.$on("itemPopEvent",(x,y,z,a)=>{
        //标题
        that.i_p_title=x;
        //是否显示弹窗
        that.is_itemPop=y;
        //弹窗步骤
        that.itemPop_step=z;
        //是否要输入交易密码
        that.is_zj_pwd=a;
        that.u_pwd="";
        that.u_pwd_see=false;
        //修改密码
        that.old_u_pwd="";
        that.new_u_pwd="";

        //设置交易密码
        that.set_new_u_pwd="";
        that.ver_new_u_pwd="";
        that.is_new_u_pwd_see=false;
        that.is_ver_new_u_pwd_see=false;

        //代币转让
        that.coin_trans_u_name="";
        that.coin_trans_amount="";

        //充值确认
        that.chargeNum="";
      });
      that.get_u_info();
    },
    watch:{
      '$store.state.u_info':{
        handler:function(newVal,oldVal){
          this.u_rate=newVal.rate
        },
        deep:true,
        immediate:true
      }
    },
    computed:{
      getRates(val){
      	return (val)=>{
      		console.log("val123456:",val);

      		let myRates=val;
      	    myRates=myRates+"";
      	    console.log("myRates",myRates);
      	    //console.log("myRates.indexOf('.')",myRates.indexOf("."));
      	    if(myRates.indexOf(".")!==-1){
      	    	console.log("匹配");
      	    	console.log("myRates的类型",typeof myRates);
      	    	let fontNum=myRates.split('.')[0];
      	    	let backNum=myRates.split('.')[1];
      	    	// myRates=myRates.split('.')[0]+"."+myRates.split('.')[1].slice(0,6);
      	    	console.log("backNum的长度：",backNum.length);
      	    	if(backNum.length>=6){
      	    		backNum=backNum.slice(0,6);
      	    	}else{
      	    		let xunHuan=6-backNum.length;
      	    		for(let i=0;i<xunHuan;i++){
      	    			backNum+="0";
      	    		}
      	    	}
      	    	return fontNum+"."+backNum;
      	    }else{
      	    	//console.log("不匹配");
      	    	return myRates+".000000";
      	    }

      	}

      }
    },
    methods:{
      get_u_info(){
        let that=this;
        this.$request.get(
          "/api/user/info",
          {

          },
          {

          }
        ).then((res)=>{
         	console.log("用户信息请求成功：",res);
          if(res.data.code==1){
            that.w_addr=res.data.data.address;
          }

         })
         .catch((err)=>{
         	console.log("用户信息请求失败：",err);
         });
      },
      setVal(val){
        let that=this;
        that[val]=!that[val];
      },
      itemPopClick(e){
        let that=this;
        console.log("itemPopClick_e:",e,"目标class:"+e.target._prevClass);
        if(e.target._prevClass=="itemPop"){
          that.op_itemPop(false);
        }
      },
      op_itemPop(val){
        let that=this;
        that.is_itemPop=val;
      },
      // 交易密码验证
      yz_qrBtn(){
        let that=this;
        this.$request.post(
             `/api/user/check_password`,
             {
               password:that.u_pwd
             },
             {

             }
          ).then((res)=>{
              console.log("验证交易密码请求成功：",res);

              if(res.data.code==1){
                that.itemPop_step=1;
                that.is_zj_pwd=false;
              }else{
                that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              }
          })
          .catch((err)=>{
            console.log("验证交易密码请求失败：",err);
          });
      },
      // 提交
      submitFn(){
        let that=this;
        if(that.i_p_title=='充值确认'||that.i_p_title=='充值'){
          console.log('that.itemPop_step_123:',that.itemPop_step);
          if(that.i_p_title=='充值确认'){
            if(that.chargeNum.length!==0){
              that.i_p_title="充值";
              that.itemPop_step=1;
              this.$refs.qrCodeDiv.innerHTML="";
              new QRCode(this.$refs.qrCodeDiv, {
              	  text: that.w_addr,
              	  width: 200,
              	  height: 200,
              	  colorDark: "#333333", //二维码颜色
              	  colorLight: "#ffffff", //二维码背景色
              	  correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
              });
            }else{
              that.$bus.$emit("toastEvent","请输入充值数量!",0);
            }
          }else if(that.i_p_title=='充值'){
            that.chargeFn();
          }


        }else if(that.i_p_title=='提现'){
          that.withdrawFn();
        }else if(that.i_p_title=='代币转让'){
          that.coinTransFn();
        }else if(that.i_p_title=='设置交易密码'){
          that.setTradePwd();
        }else if(that.i_p_title=='设置钱包地址'){
          that.setWalletAddr();
        }else if(that.i_p_title=='修改密码'){
          that.modify_pwd();
        }
        console.log("submitFn:"+that.i_p_title);
        this.$bus.$emit("u_infoEvent");
      },
      // 提现
      withdrawFn(){
        let that=this;
        this.$request.post(
             `/api/balance/withdraw`,
             {
               amount:that.withdrawAmount
             },
             {

             }
          ).then((res)=>{
              console.log("提现请求成功：",res);
              that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              if(res.data.code==1){
                that.op_itemPop(false);
              }
          })
          .catch((err)=>{
            console.log("提现请求失败：",err);
          });
      },
      //充值确认
      chargeFn(){
        let that=this;
        this.$request.post(
             `/api/balance/rechargeaddress`,
             {
               amount:that.chargeNum
             },
             {

             }
          ).then((res)=>{
              console.log("充值确认请求成功：",res);
              if(res.data.code==1){
                that.op_itemPop(false);
              }else{
                //that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              }
              that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
          })
          .catch((err)=>{
            console.log("充值确认请求失败：",err);
          });
      },
      //代币转让
      coinTransFn(){
        let that=this;
        this.$request.post(
             `/api/balance/token_transfer`,
             {
               username:that.coin_trans_u_name,
               amount:that.coin_trans_amount
             },
             {

             }
          ).then((res)=>{
              console.log("代币转让请求成功：",res);
              that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              if(res.data.code==1){
                that.op_itemPop(false);
              }
          })
          .catch((err)=>{
            console.log("代币转让请求失败：",err);
          });
      },
      //设置钱包地址
      setWalletAddr(){
        let that=this;
        this.$request.post(
             `/api/user/setaddress`,
             {
               address:that.w_addr
             },
             {

             }
          ).then((res)=>{
              console.log("设置钱包地址请求成功：",res);
              that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              if(res.data.code==1){
                that.op_itemPop(false);
              }
          })
          .catch((err)=>{
            console.log("设置钱包地址请求失败：",err);
          });
      },
      //修改密码
      modify_pwd(){
        let that=this;
        this.$request.post(
             `/api/user/netpwd`,
             {
               password:that.old_u_pwd,
               netpassword:that.new_u_pwd,
               ratpassword:that.new_u_pwd
             },
             {

             }
          ).then((res)=>{
              console.log("修改密码请求成功：",res);
              that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              if(res.data.code==1){
                that.op_itemPop(false);
              }
          })
          .catch((err)=>{
            console.log("修改密码请求失败：",err);
          });
      },
      // 设置交易密码
      setTradePwd(){
        let that=this;
        this.$request.post(
             `/api/user/trderpassword`,
             {
               netpassword:that.set_new_u_pwd,
               ratpassword:that.ver_new_u_pwd
             },
             {

             }
          ).then((res)=>{
              console.log("设置交易密码请求成功：",res);
              that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
              if(res.data.code==1){
                that.op_itemPop(false);
              }
          })
          .catch((err)=>{
            console.log("设置交易密码请求失败：",err);
          });
      }
    }
  }
</script>

<style lang="less" scoped>
.itemPop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  background-color: rgba(0, 0, 0, .2);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .itemPopMain{
    background-color: #fff;
    width: 520px;
    border-radius: 3px;
    overflow: hidden;
    .tit{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid #f0f0f0;
      strong{
        display: block;
        font-weight: normal;
        color: #262626;
        font-size: 15px;
        line-height: 24px;
      }
      img{
        display: block;
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
    }
    .itemPopMainCon{
      padding: 10px 15px;
      .i_t_m_c_00{
        li{
          margin-bottom: 10px;
          .i_t_m_c_top{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 5px;
            i{
              font-style: normal;
              color: #ff4d4f;
              font-size: 14px;
              line-height: 22px;
              height: 22px;
            }
            span{
              display: block;
              color: #262626;
              font-size: 14px;
              line-height: 22px;
              height: 22px;
              margin-left: 3px;
            }
          }
          input{
            display: block;
            outline: none;
            padding: 0 10px;
            width: calc(100% - 22px);
            height: 30px;
            line-height: 30px;
            color: #262626;
            font-size: 14px;
            border: 1px solid #d9d9d9;
            transition: .3s;
          }
          input:hover{
            border-color: #f47920;
            box-shadow: 0 0 3px #f47920;
          }
          input:focus{
            border-color: #f47920;
            box-shadow: 0 0 3px #f47920;
          }
        }
        li:last-child{
          margin-bottom: 0;
        }
      }
      .chargeBox{
        .inpLi{
        	display: flex;
        	flex-direction: row;
          i{
            display: block;
            height: 30px;
            line-height: 30px;
            color: #ff4d4f;
            font-size: 14px;
            font-style: normal;
            margin-right: 4px;
          }
        	input{
        		display: block;
        		border: 1px solid #d9d9d9;
        		border-radius: 3px;
        		padding: 0 0 0 10px;
        		height: 30px;
        		line-height: 30px;
        		color: #595959;
        		font-size: 14px;
        		outline: none;
        		width: 60px;
        	}
        	input:hover{
        		border-color: #ff8040;
        	}
        	span{
        		display: block;
        		height: 30px;
        		line-height: 30px;
        		color: #595959;
        		font-size: 14px;
        		margin-left: 5px;
        	}

        	.mr_00{
        		margin-left: 0;
        		margin-right: 5px;
        	}
        	.mr_01{
        		margin-right: 5px;
        	}
        	.mr_02{
        		margin:0 5px;
        	}
        }
        .chargeBoxMain{
          dl{
            margin-bottom: 15px;
            dt{
              display: flex;
              flex-direction: row;
              margin-bottom: 6px;
              i{
                font-style: normal;
                color: #ff4d4f;
                font-size: 14px;
                line-height: 22px;
                height: 22px;
                margin-right: 3px;
              }
              span{
                display: block;
                    color: #262626;
                    font-size: 14px;
                    line-height: 22px;
                    height: 22px;
              }
            }
            dd{
              //overflow: hidden;
              .txt{
                span{
                  display: block;
                      color: #ff4d4f;
                      font-size: 12px;
                      line-height: 20px;
                      height: 20px;
                }
              }

              .wxCode{
              	width: 200px;
              	margin: 10px 0 0;
              }

              .ddInp_00,.ddInp_01{
                display: block;
                outline: none;
                padding: 0 10px;
                width: calc(100% - 22px);
                height: 30px;
                line-height: 30px;
                color: #262626;
                font-size: 14px;
                border: 1px solid #d9d9d9;
                transition: .3s;
              }
              input:hover{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              input:focus{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              .ddInp_01{
                width: 60px;
              }
            }
          }
          dl:last-child{
            //margin-bottom: 0;
          }
        }
      }
      .i_t_m_c_top{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 5px;
        i{
          font-style: normal;
          color: #ff4d4f;
          font-size: 14px;
          line-height: 22px;
          height: 22px;
        }
        span{
          display: block;
          color: #262626;
          font-size: 14px;
          line-height: 22px;
          height: 22px;
          margin-left: 3px;
        }
      }
      .pwdInp{
        margin-top: 5px;
        position: relative;
        input{
        	display: block;
        	outline: none;
        	border: 1px solid #d9d9d9;
        	width: calc(100% - 42px);
        	padding: 0 30px 0 10px;
        	height: 36px;
        	line-height: 36px;
        	color: #000;
        	font-size: 14px;
        }

        .seeBox{
        	position: absolute;
        	top: 0;
        	right: 5px;
        	bottom: 0;
        	margin: auto;
        	width:20px;
        	height: 20px;
        	cursor: pointer;
        	img{
        		display: block;
        		width: 100%;
        	}
        }
      }
      .withdrawalBox{
        .withdrawalBoxMain{
          dl{
            margin-bottom: 15px;
            dt{
              display: flex;
              flex-direction: row;
              margin-bottom: 6px;
              i{
                font-style: normal;
                color: #ff4d4f;
                font-size: 14px;
                line-height: 22px;
                height: 22px;
                margin-right: 3px;
              }
              span{
                display: block;
                    color: #262626;
                    font-size: 14px;
                    line-height: 22px;
                    height: 22px;
              }
            }
            dd{
              //overflow: hidden;
              .y_txt{
                span{
                  display: block;
                  color: #e5bfa4;
                  font-size: 12px;
                  line-height: 20px;
                  height: 20px;
                }
              }

              .wxCode{
              	width: 200px;
              	margin: 10px 0 0;
              }

              .ddInp_01{
                display: block;
                outline: none;
                padding: 0 0 0 10px;
                width: calc(100% - 12px);
                height: 30px;
                line-height: 30px;
                color: #262626;
                font-size: 14px;
                border: 1px solid #d9d9d9;
                transition: .3s;
                border-radius: 3px;
              }
              input:hover{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              input:focus{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              .ddInp_01{
                width: 60px;
              }
            }
          }
          dl:last-child{
            //margin-bottom: 0;
          }
        }
      }

      .coinTransBox{
        .coinTransBoxMain{
          dl{
            margin-bottom: 15px;
            dt{
              display: flex;
              flex-direction: row;
              margin-bottom: 6px;
              i{
                font-style: normal;
                color: #ff4d4f;
                font-size: 14px;
                line-height: 22px;
                height: 22px;
                margin-right: 3px;
              }
              span{
                display: block;
                    color: #262626;
                    font-size: 14px;
                    line-height: 22px;
                    height: 22px;
              }
            }
            dd{
              input{
                display: block;
                outline: none;
                padding: 0 0 0 10px;
                width: calc(100% - 12px);
                height: 30px;
                line-height: 30px;
                color: #262626;
                font-size: 14px;
                border: 1px solid #d9d9d9;
                transition: .3s;
                border-radius: 3px;
              }
              input:hover{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              input:focus{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              .ddInp_01{
                width: 60px;
              }
              .ddInp_02{
                padding: 0 10px;
                width: calc(100% - 22px);
              }
            }
          }
          dl:last-child{
            //margin-bottom: 0;
          }
        }
      }

      .setWalletAddrBox{
        .setWalletAddrBoxMain{
          dl{
            margin-bottom: 15px;
            dt{
              display: flex;
              flex-direction: row;
              margin-bottom: 6px;
              i{
                font-style: normal;
                color: #ff4d4f;
                font-size: 14px;
                line-height: 22px;
                height: 22px;
                margin-right: 3px;
              }
              span{
                display: block;
                    color: #262626;
                    font-size: 14px;
                    line-height: 22px;
                    height: 22px;
              }
            }
            dd{
              //overflow: hidden;
              .y_txt{
                span{
                  display: block;
                  color: #e5bfa4;
                  font-size: 12px;
                  line-height: 20px;
                  height: 20px;
                }
              }

              input{
                display: block;
                outline: none;
                padding: 0 0 0 10px;
                width: calc(100% - 12px);
                height: 30px;
                line-height: 30px;
                color: #262626;
                font-size: 14px;
                border: 1px solid #d9d9d9;
                transition: .3s;
                border-radius: 3px;
              }
              input:hover{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              input:focus{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              .ddInp_01{
                width: 60px;
              }
              .ddInp_02{
                padding: 0 10px;
                width: calc(100% - 22px);
              }
            }
          }
          dl:last-child{
            //margin-bottom: 0;
          }
        }
      }

      .setTransPwdBox{
        .setTransPwdBoxMain{
          dl{
            margin-bottom: 15px;
            dt{
              display: flex;
              flex-direction: row;
              margin-bottom: 6px;
              i{
                font-style: normal;
                color: #ff4d4f;
                font-size: 14px;
                line-height: 22px;
                height: 22px;
                margin-right: 3px;
              }
              span{
                display: block;
                    color: #262626;
                    font-size: 14px;
                    line-height: 22px;
                    height: 22px;
              }
            }
            dd{
              position: relative;
              .seeBox{
              	position: absolute;
              	top: 0;
              	right: 5px;
              	bottom: 0;
              	margin: auto;
              	width:20px;
              	height: 20px;
              	cursor: pointer;
              	img{
              		display: block;
              		width: 100%;
              	}
              }
              input{
                display: block;
                outline: none;
                width: calc(100% - 42px);
                padding: 0 30px 0 10px;
                height: 30px;
                line-height: 30px;
                color: #262626;
                font-size: 14px;
                border: 1px solid #d9d9d9;
                transition: .3s;
                border-radius: 3px;
              }
              input:hover{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              input:focus{
                border-color: #f47920;
                box-shadow: 0 0 3px #f47920;
              }
              .ddInp_01{
                width: 60px;
              }
              .ddInp_02{
                padding: 0 10px;
                width: calc(100% - 22px);
              }
            }
          }
          dl:last-child{
            //margin-bottom: 0;
          }
        }
      }

    }
    .itemPop_bot{
      padding:10px 15px;
      border-top: 1px solid #f0f0f0;
      dl{
        display: flex;
        flex-direction: row-reverse;
        dt,dd{
          height: 30px;
          line-height: 30px;
          padding: 0 14px;
          cursor: pointer;
          border-radius: 3px;
          font-size: 14px;
          border: 1px solid #f47920;
        }
        dt{
          background-color: #f47920;
          color: #fff;
          margin-left: 10px;
        }
        dd{
          color: #595959;
          border-color: #d9d9d9;
          transition: .3s;
        }
        dd:hover{
          color: #f47920;
          border-color: #f47920;
        }
      }
    }
  }
}
</style>